import { h } from 'vue'
import { NIcon, useMessage } from 'naive-ui'
import { IosAirplane } from '@vicons/ionicons4'

type NotificationType = 'default' | 'info' | 'success' | 'warning' | 'error'

const useNotification = () => {
  const message = useMessage()

  const notify = (type: NotificationType, title: string, content: string) => {
    message[type]({
      title: title,
      content: content,
      icon: type === 'default' ? () => h(NIcon, null, { default: () => h(IosAirplane) }) : undefined
    })
  }

  return {
    notify
  }
}

export default useNotification


/**
 * 使用示例:
 */
// <template>
// <div>
//   <button @click="showDefault">Default</button>
//   <button @click="showInfo">Info</button>
//   <button @click="showSuccess">Success</button>
//   <button @click="showWarning">Warning</button>
//   <button @click="showError">Error</button>
//   </div>
//   </template>
//
//   <script lang="ts">
// import { defineComponent } from 'vue'
// import useNotification from '@/utils/notification'
//
// export default defineComponent({
//   setup() {
//     const { notify } = useNotification()
//
//     const showDefault = () => notify('default', 'Default 类型', "Gee it's good to be back home")
//     const showInfo = () => notify('info', 'Info 类型', "Gee it's good to be back home")
//     const showSuccess = () => notify('success', 'Success 类型', 'Leave it till tomorrow to unpack my case')
//     const showWarning = () => notify('warning', 'Warning 类型', 'Honey disconnect the phone')
//     const showError = () => notify('error', 'Error 类型', "I'm back in the U.S.S.R.")
//
//     return {
//       showDefault,
//       showInfo,
//       showSuccess,
//       showWarning,
//       showError
//     }
//   }
// })
// </script>

